<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>
    
    <script src="http://www.google.com/jsapi?key=ABQIAAAA-W9uqIa2PP530F8zDw7ifhRzWAkh1BJXTJPjs-VxE17765CtzxTMrSE7KOShOGqhmxrFQXXL8tipng"
      type="text/javascript"></script>
    <script type="text/javascript">

var geocoder;
var address;
var counter;
var LEGISLATOR_SERVICE = "/fb/legislators_in_state?state=";

function load() {
  if (GBrowserIsCompatible()) {
	geocoder = new GClientGeocoder();
	map = new GMap2(document.getElementById("map"), {"draggableCursor":"pointer"});
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	GEvent.addListener(map,"click", function(overlay, latlng) {   
	      if (latlng != null) {
	        address = latlng;
	        geocoder.getLocations(latlng, getLegislators);
	      }
	});
	map.setCenter(new GLatLng(39, -96), 4);
  }
}

function getLegislators(response) {

	$("#legislator_results").empty();
   	if (!response || response.Status.code != 200) {
   		$("<h3>There was an error. Please try again.</h3>").appendTo("#legislator_results");
   	} else {
	   	place = response.Placemark[0];  	
	   	url = LEGISLATOR_SERVICE + place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
		$.getJSON(url, function (data) { printLegislatorResults(data); });
		$("<h3>looking up legislators in this state... one moment please...</h3>").appendTo("#legislator_results");	
	}
}

function printLegislatorResults(obj) {
	str = "<h3>There was an error. Please try again.</h3>";
	if (obj != null) {
		if (obj.result == "ok") {
			if (obj.state) {
				str = "<table><tr><td align='left' colspan='2'><b>" + obj.state.state + "<b></td></tr><tr><td align='left'>Senators</td><td align='left'>Representatives</td></tr><tr><td valign='top'>";
				
				if (obj.state.senators) {
					str += "<table><tr>";
					$.each(obj.state.senators, function() {
						str += "<td valign='top'><table><tr><td width=\"48\"><img src=\"http://representedby.appspot.com/includes/photos/40x50/" + this.id + ".jpg\" /></td></tr>";
						str += "<tr><td width=\"50\"><a target='_top' href=\"http://apps.facebook.com/representedby/legislator?id=" + this.id + "\">" + this.name + "</a></td></tr></table></td>";
					});
					str += "</tr></table>";
				}
				str += "</td><td valign='top'>";
				if (obj.state.representatives) {
					str += "<table><tr>";
					counter = 0;
					$.each(obj.state.representatives, function() {
						str += "<td valign='top'><table><tr><td width=\"48\"><img src=\"http://representedby.appspot.com/includes/photos/40x50/" + this.id + ".jpg\" /></td></tr>";
						str += "<tr><td width=\"50\"><a target='_top' href=\"http://apps.facebook.com/representedby/legislator?id=" + this.id + "\">" + this.name + "</a></td></tr></table></td>";
						counter++;
						if ((counter % 8) == 0) {
							str += "</tr><tr>";
						}
					});
					str += "</tr></table>";
				}
				str += "</td></tr></table>";
			}
		} else {
			str = "<h3>" + obj.message + "</h3>";
		}
	}
	$("#legislator_results").empty();
	$(str).appendTo("#legislator_results");	
	window.scrollTo(0,400);
}

google.load("maps", "2");
google.load("jquery", "1");

</script>
<link href="http://representedby.appspot.com/includes/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="fbbody" onload="load()" onunload="GUnload()">
  	<div id="container" style="width:732px">
	<h2>Click on the map to see legislators in that state</h2>
    <div id="map" style="width:730px;height:400px"></div>
	<div id="legislator_results"></div>
	</div>
  </body>
</html>
